<!--
 * @Descripttion: 
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-28 17:34:52
 * @LastEditors: 淏
 * @LastEditTime: 2024-04-30 17:38:46
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-s-order"></i>
          <span style="color: #00ffff">待入库数据</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <virtuallyTable
        :tableData="tableData"
        :columns="columns"
        :tableHeight="tableHeight"
        @getTableSel="getTableSel"
      ></virtuallyTable>
    </div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-edit"></i>
          <span style="color: #00ffff">入库参数</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card class="cleatCard">
      <el-form
        v-model="insertColumns"
        ref="cleanForm"
        label-width="80px"
        class="demo-dynamic"
      >
        <el-row>
          <el-col :span="4">
            <el-form-item label-width="100px">
              <span slot="label">
                <span class="text">数据集</span>
              </span>
              <selectImport
                :type="importType"
                :importId="chooseImport.id"
                @getImport="getImport"
              ></selectImport>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="100px">
              <span slot="label">
                <span class="text">是否去重</span>
              </span>
              <el-switch
                size="mini"
                active-value="是"
                inactive-value="否"
                v-model="removeRepeat"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="100px">
              <span slot="label">
                <span class="text">选择表头行</span>
              </span>
              <el-tag size="medium" class="button" style="border-radius: 5px">
                <span class="text" style="color: #00ffff">
                  请在上方表格内勾选表头行（注：只能勾选一行，勾选多行会导致入库失败）
                </span>
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="chooseColumn.length > 0">
          <el-button
            class="button"
            @click="resetting"
            v-waves
            plain
            size="mini"
          >
            重置
          </el-button>
          <div
            v-for="(insertItem, insertIndex) in insertColumns"
            :key="insertIndex"
            style="margin-top: 20px"
          >
            <el-col :span="3">
              <el-form-item label="导入列" label-width="60px">
                <span slot="label">
                  <span class="text">导入列</span>
                </span>
                <el-select
                  size="mini"
                  v-model="insertItem.index"
                  placeholder="导入列"
                  class="handle-select mr10"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="(item, index) in columns"
                    :key="index"
                    :label="item.columnCnName"
                    :value="item.columnEnName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="列名" label-width="60px">
                <span slot="label">
                  <span class="text">字段</span>
                </span>
                <el-select
                  size="mini"
                  v-model="insertItem.tableEnName"
                  placeholder="选择列名"
                  class="handle-select mr10"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="(item, index) in importColumn"
                    :key="index"
                    :label="item.columnCnName"
                    :value="item.columnEnName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-tooltip content="删除该列" placement="right-start">
                <el-button
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  plain
                  class="button"
                  @click="removeColumn(insertItem)"
                ></el-button>
              </el-tooltip>
            </el-col>
          </div>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import virtuallyTable from '@/components/public/virtuallyTable.vue'
  import selectImport from '@/components/public/selectImport.vue'
  import { query_tableColumn, dataPersist_import } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'dataPersist',
    // 组件参数 接收来自父组件的数据
    props: {
      tableData: {
        type: Array,
        required: true,
      },
      columns: {
        type: Array,
        required: true,
      },
      chooseImported: {
        type: Object,
        required: true,
      },
    },
    // 局部注册的组件
    components: { virtuallyTable, selectImport },
    // 组件状态值
    data() {
      return {
        tableHeight: 200,
        chooseImport: '',
        importColumn: '',
        chooseColumn: '',
        importType: 'import',
        insertColumns: '',
        removeRepeat: '是',
        colSpan: 3,
        headerIndex: '',
        headerRow: [],
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      chooseImported: {
        handler(newName, oldName) {
          this.chooseImport = newName
          this.searchColumn()
        },
        immediate: true,
      },
    },
    // 组件方法
    methods: {
      //数据集选择后触发
      getImport(row) {
        if (row != undefined) {
          this.chooseImport = row
          console.log(this.chooseImport)
          this.searchColumn()
        }
      },
      getTableSel(row) {
        this.headerIndex = row
      },
      searchColumn() {
        let importId = this.chooseImport.id
        let params = new URLSearchParams()
        params.append('importId', importId)
        query_tableColumn(params).then((res) => {
          this.chooseColumn = res.data
          this.importColumn = res.data
          this.insertColumns.map((item) => {
            item.tableEnName = ''
          })
          if (this.importColumn.length > 0) {
            this.colSpan = 3
            this.importColumn.map((item) => {
              this.insertColumns[item.sort].tableEnName = item.columnEnName
            })
          } else {
            this.colSpan = 6
          }
        })
      },
      //提交数据
      submitAdd() {
        let index = this.headerIndex
        if (index === '' || index === null) {
          this.$message({
            type: 'error',
            message: '请在上方表格选择表头行！',
          })
        } else if (this.chooseImport == '') {
          this.$message({
            type: 'error',
            message: '请选择入库的数据集',
          })
        } else {
          let _this = this
          let rows = JSON.stringify(this.tableData)
          let insertColumns = JSON.stringify(this.insertColumns)
          let importId = this.chooseImport.id
          let removeRepeat = this.removeRepeat
          let headerIndex = this.headerIndex
          var qs = require('qs')
          var data = qs.stringify({
            importId: importId,
            rows: rows,
            insertColumns: insertColumns,
            removeRepeat: removeRepeat,
            headerIndex: headerIndex,
          })
          this.$loading.show()
          dataPersist_import(data)
            .then((res) => {
              this.$loading.close()
              if (res.code == 1) {
                this.$confirm('入库成功！' + res.message, {
                  showCancelButton: false,
                  confirmButtonText: '确定',
                  type: 'success',
                }).then(() => {
                  let imports = {
                    importData: _this.chooseImport,
                  }
                  this.$router.push({
                    path: '/importInfo',
                    query: {
                      chooseImport: imports,
                    },
                  })
                })
              } else {
                this.$message({
                  type: 'error',
                  message: res.message,
                })
              }
            })
            .catch((err) => {
              this.$loading.close()
            })
        }
      },
      resetting() {
        this.insertColumns = this.columns.map((item) => {
          let column = {
            tableEnName: '',
            index: item.columnEnName,
          }
          return column
        })
        this.insertColumns.map((item) => {
          item.tableEnName = ''
        })
        if (this.importColumn.length > 0) {
          this.colSpan = 3
          this.importColumn.map((item) => {
            this.insertColumns[item.sort].tableEnName = item.columnEnName
          })
        } else {
          this.colSpan = 6
        }
      },
      //删除列
      removeColumn(item) {
        var index = this.insertColumns.indexOf(item)
        if (this.insertColumns.length != 1) {
          if (index !== -1) {
            this.insertColumns.splice(index, 1)
          }
        }
      },
    },
    created() {},
    mounted() {
      this.insertColumns = this.columns.map((item) => {
        let column = {
          tableEnName: '',
          index: item.columnEnName,
        }
        return column
      })
    },
  }
</script>

<style scoped>
  .cleatCard {
    background: rgba(48, 89, 224, 0.3);
    border: 1px solid #295a85;
    overflow: auto; /* 自动开启滚动条 */
    min-height: 35vh; /* 设置最大高度 */
  }
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
</style>
